<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-card {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            width: 300px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        input[type="text"],
        input[type="password"] {
            width: 90%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin: 5px 0;
        }
        button:hover {
            background-color: #45a049;
        }
        #resetButton {
            background-color: #f44336;
        }
        #resetButton:hover {
            background-color: #e53935;
        }
        #registerButton {
            background-color: #2196F3;
        }
        #registerButton:hover {
            background-color: #1976D2;
        }
        #error-message {
            color: red;
            text-align: center;
            margin-top: 10px;
        }
    </style>
    <script>
        function redirectToRegister() {
            window.location.href = '/OnlineEducationPlatform_1_0_SNAPSHOT_war/views/register.jsp'; // Redirect to register page
        }

        function resetForm() {
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            document.getElementById('error-message').textContent = ''; // Clear any previous error messages
        }

        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById('loginForm').onsubmit = async function(event) {
                event.preventDefault(); // Prevent the default form submission

                // Gather the input values
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;

                // Send the login request using fetch with correct context path
                const response = await fetch('/OnlineEducationPlatform_1_0_SNAPSHOT_war/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        username: username,
                        password: password
                    })
                });

                // Handle the response
                if (response.ok) {
                    // Login successful
                    window.location.href = '/OnlineEducationPlatform_1_0_SNAPSHOT_war/views/user.jsp'; // Redirect to user page
                } else {
                    // Login failed
                    const errorMessage = await response.text(); // Get error message from response
                    document.getElementById('error-message').textContent = errorMessage; // Display error message
                }
            };
        });
    </script>

</head>
<body>

<div class="login-card">
    <h2>登录</h2>
    <form id="loginForm"> <!-- Add id for form -->
        <label for="username">账号:</label>
        <input type="text" id="username" name="username" required>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>

        <button type="submit">登录</button>
        <button type="button" id="registerButton" onclick="redirectToRegister()">注册</button>
        <button type="button" id="resetButton" onclick="resetForm()">重置</button>
    </form>
    <div id="error-message"></div> <!-- Add a div for displaying error messages -->
</div>

</body>
</html>
